<template>
  <div class="set">
    <!-- 员工添加 -->
    <div class="add_Mployee">
      <div>
        <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" :size="80"></el-avatar>
      </div>
      <div>
        部门:
        <el-select v-model="branch" placeholder="请选择部门" class="size">
          <el-option v-for="(item,index) in options" :label="item" :value="index" :key='index'></el-option>
        </el-select>
      </div>
      <div>
        工号:
        <el-input v-model="Code[branch]" placeholder="请输入工号" class="size"></el-input>
      </div>
      <div>
        职位:
        <el-input v-model="post" placeholder="请输入职位" class="size"></el-input>
      </div>
      <div>
        姓名:
        <el-input v-model="name" placeholder="请输入姓名" class="size"></el-input>
      </div>
      <div>
        账号:
        <el-input v-model="user" placeholder="请输入账号" class="size"></el-input>
      </div>
      <div>
        密码:
        <el-input v-model="pass" placeholder="请输入密码" class="size"></el-input>
      </div>
      <div class="btn">
        <el-button type="primary" class='btnsize' @click = 'sendData()'>添加</el-button>
        <el-button class='btnsize'>取消</el-button>
      </div>

    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        //部门选项
        options: ['教学部', '就业部', '招生部', '后勤部'],
        //部门
        branch: '',
        // 工号
        Code: ['JX', 'JY', 'JS', 'HQ'],
        //职位
        post : '',
        //姓名
        name: '',
        //账号
        user: '',
        //密码
        pass: '',
        //可提交数据
        MployeeData: {
          branch: '',
          Code: '',
          post : '',
          name: '',
          user: '',
          pass: ''
        }
      }
    },
    methods:{
      sendData:function(){
        this.MployeeData.branch = this.options[this.branch];
        this.MployeeData.Code = this.Code[this.branch];
        this.MployeeData.post = this.post;
        this.MployeeData.name = this.name;
        this.MployeeData.user = this.user;
        this.MployeeData.pass = this.pass;



      }
    }

  }
</script>

<style scoped="scoped">
  .set {
    width: 100%;
    background-color: #B3D8FF;
  }

  .add_Mployee {
    width: 500px;
    height: 630px;
    box-shadow: 5px 0px 5px #ccc, -5px 0px 5px #ccc;
    border: 3px solid #ccc;
    margin: 0 auto;
    background-color: #fff;
    /* border-radius:25px ; */
  }

  .add_Mployee div {
    margin-top: 15px;
  }

  .size {
    width: 300px;
  }

  .btnsize {
    width: 150px;
    margin-left: 15px;
  }
</style>
